// 列表页内容模块

import './common.js';

/* import axios from "axios";
import {$} from './utils.js';

// 保存当前页面地址
localStorage.setItem('currentUrl',location.href);

// 获取本地存储中的token
let token = localStorage.getItem('token');

if (token) {
    // 发送 判断是否已登录 请求
    axios({
        method: 'get',
        url: 'http://localhost:9999/users/islogin',
        headers: {
            Authorization: token
        }
    })
    .then((res)=>{
        if (res.data.code === 1) {// 已登录
            // 展示用户昵称
            $('.username').innerText = res.data.userData[1];
        } else {// 未登录
            // 跳转到登录页
            location.href = './login.html';
        }
    })
    .catch(()=>{
        alert('网络异常，请刷新！');
    });
}
else {
    // 跳转到登录页
    location.href = './login.html';
}

// 显示/隐藏用户菜单
$('.menu-box').onmouseenter = function (){
    $('.user-menu').style.display = 'block';
};
$('.menu-box').onmouseleave = function (){
    $('.user-menu').style.display = 'none';
};

// 点击退出登录
$('.logout').onclick = function (){
    // 提示用户
    alert('退出登录成功！');
    // 删除本地的token
    localStorage.removeItem('token');
    // 刷新页面
    location.reload();
}; */

import axios from "axios";
import {$} from './utils.js';

let pages = 0;// 记录总页数
let page = 1;// 记录当前页码
let size = 4;// 记录每页条数
let url1 = 'http://localhost:9999/goods/getpage';
let url2 = 'http://localhost:9999/goods/search';
let flag = true;// true使用url1，false使用url2
let wd;// 搜索关键字

// 进入页面，默认获取第一页数据并渲染展示
getPageData(url1,page,size);

// 选择每页条数
$('#select').onchange = function (){
    // 修改每页条数
    size = this.value;
    
    // 获取数据
    if (flag) {
        getPageData(url1,page,size);
    } else {
        getPageData(url2,page,size,wd);
    }
};

// 模糊查询
$('.searchBtn').onclick = function (){
    page = 1;// 默认显示第一页搜索数据
    // 获取查询关键字
    wd = $('.wd').value;
    // 空值判断
    if (!wd) {
        alert('搜索关键字不能为空！');
        return;
    }

    flag = false;

    // 获取搜索数据
    getPageData(url2,page,size,wd);

    /* // 发送请求
    axios({
        method: 'get',
        url: 'http://localhost:9999/goods/search',
        params: {
            page,
            size,
            wd
        }
    })
    .then(res=>{
        if (res.data.code === 1) {// 查询成功
            // 修改总页数
            pages = res.data.pages;
            // 渲染表格
            renderTable(res.data.data);
            // 渲染分页
            renderPages(page,pages);
        }
        else{
            $('.table').innerHTML = `<h2>暂无数据，请换一个关键字重试！</h2>`;
        }
    })
    .catch(()=>{
        $('.table').innerHTML = `<h2>网络异常，请重试！</h2>`;
    }); */
};

$('.pagination').onclick = function (e){
    // 点击下一页
    if (e.target.parentNode.className === 'next') {
        // 当前页码递增
        page++;
        // 临界值判断
        if (page > pages) {
            page = pages;
            return;
        }

        // 获取数据
        if (flag) {
            getPageData(url1,page,size);
        } else {
            getPageData(url2,page,size,wd);
        }
    }

    // 点击上一页
    if (e.target.parentNode.className === 'prev') {
        // 当前页码递减
        page--;
        // 临界值判断
        if (page === 0) {
            page = 1;
            return;
        }

        // 获取数据
        if (flag) {
            getPageData(url1,page,size);
        } else {
            getPageData(url2,page,size,wd);
        }
    }

    // 点击任意页码
    if (e.target.tagName === 'A') {
        // 修改当前页码
        page = e.target.innerText;

        // 获取数据
        if (flag) {
            getPageData(url1,page,size);
        } else {
            getPageData(url2,page,size,wd);
        }
    }
};

// 获取分页数据
function getPageData(url,page,size,wd = ''){
    // 发送请求
    axios({
        method: 'get',
        // url: 'http://localhost:9999/goods/getpage',
        url: url,
        params: {page,size,wd}
    })
    .then(res=>{
        let {data} = res;
        if (data.code === 1) {
            // 记录总页数
            pages = data.pages;
            // 渲染表格
            renderTable(data.data);
            // 渲染分页
            renderPages(page,pages);
        } else {
            $('.table').innerHTML = `<h2>暂无数据！</h2>`;
        }
    })
    .catch(()=>{
        $('.table').innerHTML = `<h2>网络异常，请刷新重试！</h2>`;
    });
}

// 根据数据渲染表格
function renderTable(datas){
    console.log( datas );// [{item},{item},{item},{item}]

    // 拼接的模板
    let tmp = `<tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品描述</th>
                <th>商品类型</th>
                <th>商品数量</th>
                <th>商品图片</th>
                <th>操作</th>
            </tr>`;

    // 遍历数据
    datas.forEach(item=>{
        tmp += `<tr>
                    <td>${item.name}</td>
                    <td>${item.price}</td>
                    <td>${item.desc}</td>
                    <td>${item.type}</td>
                    <td>${item.count}</td>
                    <td>
                    <img src="${item.imgurl}" alt="">
                    </td>
                    <td>
                        <button class="btn btn-success btn-xs"><span class="glyphicon glyphicon-pencil"></span> 编辑</button>
                        <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span> 删除</button>
                    </td>
                </tr>`;
    });

    // 添加到表格中
    $('.table').innerHTML = tmp;

    // 删除商品
    let dels = $('.table .btn-danger');
    for (var i = 0; i < dels.length; i++) {
        dels[i].onclick = function (){
            // this -> 你点击的那个按钮
            // 获取当前要删除的商品名称
            let name = this.parentNode.parentNode.firstElementChild.innerText;
            // 发送请求
            axios({
                method: 'post',
                url: 'http://localhost:9999/goods/del',
                data: {name}
            })
            .then((res)=>{
                alert(res.data.msg);
                if (res.data.code === 1) {// 删除成功
                    // 获取分页数据
                    getPageData(url1,page,size);
                }
            })
            .catch(()=>{
                alert('网络异常，请重试！');
            });
        };
    }

    // 编辑商品
    let edits = $('.table .btn-success');
    let oname;// 商品原始名称
    for (var x = 0; x < edits.length; x++) {
        edits[x].onclick = function (){
            console.log( 1234567 );
            // this -> 点击的那个按钮
            // 显示模态框
            $('#modal').style.display = 'block';
            $('.mask').style.display = 'block';

            // 获取当前商品数据
            oname = this.parentNode.parentNode.children[0].innerText;
            let name = this.parentNode.parentNode.children[0].innerText;
            let price = this.parentNode.parentNode.children[1].innerText;
            let desc = this.parentNode.parentNode.children[2].innerText;
            let type = this.parentNode.parentNode.children[3].innerText;
            let count = this.parentNode.parentNode.children[4].innerText;
            let imgurl = this.parentNode.parentNode.children[5].firstElementChild.src;

            // 将商品数据填入编辑框中
            $('.name').value = name;
            $('.price').value = price;
            $('.desc').value = desc;
            $('.type').value = type;
            $('.count').value = count;
            $('.imgurl').value = imgurl;
        };
    }

    // 保存修改
    $('#save').onclick = function (){
        axios({
            method: 'post',
            url: 'http://localhost:9999/goods/update',
            data: {
                oname: oname,
                name: $('.name').value,
                price: $('.price').value,
                desc: $('.desc').value,
                type: $('.type').value,
                count: $('.count').value,
                imgurl: $('.imgurl').value
            }
        })
        .then(res=>{
            alert(res.data.msg);
            if (res.data.code === 1) {
                // 隐藏模态框
                $('#modal').style.display = 'none';
                $('.mask').style.display = 'none';

                // 获取分页数据
                getPageData(url1,page,size);
            }
        });
    };

    // 上传图片
    $('.upload').onsubmit = function (e){
        e.preventDefault();// 阻止表单提交

        // 创建FormData对象
        let fd = new FormData(this);
        // 发送请求
        axios({
            method: 'post',
            url: 'http://localhost:9999/goods/upload',
            data: fd
        })
        .then(res=>{
            alert(res.data.msg);
            if (res.data.code === 1) {// 上传成功 
                // 将图片地址填入图片地址中
                $('.imgurl').value = res.data.imgurl;
            }
        })
        .catch(()=>{
            alert('上传失败，请重试！');
        });
    };

    // 关闭模态框
    $('.close').onclick = function (){
        // 隐藏模态框
        $('#modal').style.display = 'none';
        $('.mask').style.display = 'none';
    };
}

// 根据数据渲染分页
function renderPages(page,pages){
    console.log( page,pages );// 1 5

    // 模板字符串
    let tmp = `<li class="prev">
                    <span aria-hidden="true">&laquo;</span>
                </li>`;
    // 遍历生成页码
    for (var i = 1; i <= pages; i++) {
        tmp += `<li><a href="#">${i}</a></li>`;
    }
    // 拼接下一页
    tmp += `<li class="next">
                <span aria-hidden="true">&raquo;</span>
            </li>`;
    // 添加到页面中
    $('.pagination').innerHTML = tmp;

    // 当前页添加选择状态
    $('.pagination li')[page].className = 'active';
}